<template>
  <el-container class="container_cover">
    <el-container class="container_center">
      <!-- 左侧导航菜单 -->
      <el-aside :width="asideWidth"> <Aside /> </el-aside>

      <!-- 右侧主体 -->
      <el-container class="container_right">
        <!-- 展开收缩图标 -->
        <el-icon size="20" color="#414346" @click="onFlod" class="icon_style">
          <component :is="collapse ? ArrowRight : ArrowLeft"></component>
        </el-icon>
        <!-- chat主体部分 -->
        <el-container class="chatview">
          <router-view></router-view>
          <!-- GPT 的回复 -->
        </el-container>
      </el-container>
    </el-container>
  </el-container>
</template>
<script setup lang="ts">
import { IStore } from "@/App.vue";
import { QueryApi } from "@/api/api";
import { accountType } from "@/config/Enum";
import Var from "@/config/Var";
import { useDebounce } from "@/hooks/UseDebounce";
import Aside from "@/views/knowledge/Aside.vue";
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Expand,
  Promotion,
} from "@element-plus/icons-vue";
import { ElMessage, ElLoading } from "element-plus";
import { inject, nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
import chaticon from "../../../public/images/ChatGPT.svg";

interface messageType {
  isCode: boolean; //是否代码
  isPreview: boolean; //是否gpt回复前的测试
  text: string;
  type: accountType;
  avatar?: string;
}

// 引入全局信息
const store = inject<IStore>("store");
// 引入防抖函数
const { debounce } = useDebounce();

const data = reactive<{
  // 左侧输入框收缩控制
  collapse: boolean;
  // 左侧输入框宽
  asideWidth: string;
  // 手机端左侧抽屉
  leftdrawer: boolean;
}>({
  collapse: false,
  asideWidth: "",
  leftdrawer: false,
  controller: null,
});

// 控制aside收缩或展开
const onFlod = () => {
  asideWidth.value = collapse.value ? "260px" : "0";
  collapse.value = !collapse.value;
};

// 手机端展示抽屉
const handleDrawer = () => {
  data.leftdrawer = true;
  console.log("data.leftdrawer::: ", data.leftdrawer);
};

const { collapse, asideWidth, leftdrawer } = toRefs(data);
</script>
<style lang="less" scoped>
.container_cover {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 16px;
  // border: 1px solid #abc;
  .container_center {
    width: 100%;
    height: 100%;
    border: 1px solid #e5e7eb;
    box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.2);
    border-radius: 10px; /* 设置圆角为 10px */
    overflow: hidden;

    .el-aside {
      transition: width 0.3s; /* 宽度变化过渡效果 */
    }
    .container_right {
      position: relative;
      .icon_style {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        border: 1px solid #abc;
        position: absolute;
        left: -10px;
        top: 50%;
        z-index: 1;
        background-color: #fff;
      }
      .icon_style:hover {
        border: 2px solid #abc;
      }
      .chatview {
        width: 100%;
        height: calc(100% - 72px);
        overflow-y: auto;
        position: absolute;
        left: 0;
        top: 0;
        padding: 16px;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;

        .gpt-message {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 6px;
          // background-color: #abc;
          margin-bottom: 10px;
          // border: 1px solid red;
          .gpt_head {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
          }
        }

        .user-message {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: flex-end;
          // background-color: whitesmoke;
          margin-bottom: 10px;
          padding: 10px;
          // border: 1px solid red;
          .user_head {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            // border: 1px solid red;
          }
        }

        .message-text {
          margin-left: 10px;
          margin-right: 10px;
        }
        /* 新增的代码消息样式 */
        .code-message {
          background-color: #000;
          color: #fff;
          padding: 10px;
          border-radius: 5px;
          white-space: pre-wrap;
        }
      }
      .sengChat {
        width: 100%;
        height: 72px;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 16px;
        // border: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        .delete_icon {
          width: 40px;
          height: 36px;
          cursor: pointer;
          line-height: 36px;
        }
        .delete_icon:hover {
          background-color: #e5e7eb;
          border-radius: 20px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置阴影 */
        }
        .el-input {
          height: 36px;
          margin: 0 12px;
        }
        .el-button {
          height: 36px;
        }
      }
    }
  }
}
</style>
